// 签约联系人
import React from 'react';
import { useState, useEffect } from 'react'
import leaseadmin from '../assets/css/leaseadmin.module.css';
import { Radio } from 'antd';
import { Collapse } from 'antd';
import { Button } from 'antd';
import { Input } from 'antd'
import { Table } from 'antd';
import { Modal, message} from "antd";
import { DownOutlined,UpOutlined } from '@ant-design/icons';
import axios from '../axios/index';
import modal from '../assets/css/modal.module.css'
import custom from '../assets/css/custom/customIndex.module.css';
const { Panel } = Collapse;


// 表格数据
// const dataSource = [
//   { key: '1', company: "北京西天取经", house: '骏豪中央广场A座', admin: '张三', phone: '+8615517785342', email: "张三", email: "xx@qq.com", caozuo: "设置管理员" },
//   { key: '2', company: "张泽亮465456123", house: '骏豪中央广场B座', admin: '-', phone: '+8615517785342', email: "-", email: "xx@qq.com", caozuo: "设置管理员" },
//   { key: '3', company: "华彩科技(北京)有限公司", house: '骏豪中央广场A座,骏豪中央广场B座', admin: '李四', phone: '+8615517785342', email: "xx@qq.com", caozuo: "设置管理员" },
//   { key: '4', company: "百度网络科技有限公司", house: '骏豪中央广场A座,骏豪中央广场B座', admin: '王五', phone: '+8615517785342', email: "xx@qq.com", caozuo: "设置管理员" },
// ];

export default function Sign() {
  // 折叠
  let  [collapsed, setCollapsed] = useState(true);
  // 展开
 
  // 展开筛选
  const handleCollapse = () => {
    setCollapsed(!collapsed);
  };

  // 存储单条数据
  let [listRow, setListRow] = useState({})
  // 单选框
  const [value, setValue] = useState(1);
  const onChange = (e) => {
    console.log('radio checked', e.target.value);
    setValue(e.target.value);
  };

  // 分页器
  const itemRender = (page, type, originalElement) => {
    if (type === 'prev') {
      return;
    }
    if (type === 'next') {
      return <a>下一页</a >;
    }

    return originalElement;
  };

  // 模态框
  const [isModalOpen, setIsModalOpen] = useState(false);

  // 表格数据
  let [ctableData, setCableData] = useState([]);
  let [listName, setListName] = useState(listRow.name);
  let [listPhone, setListPhone] = useState(listRow.phone);
  let [listEmail, setListEmail] = useState(listRow.email);
  let [listWork, setListWork] = useState(listRow.work);

  const successMsg = () => {
    message.open({
      type: 'success',
      content: '修改成功',
      duration: 3,
    });
  };


  // 表头配置
  const columns = [
    {
      title: '客户名称',
      dataIndex: 'name',
      key: 'name',
      render: (text) => <span className={leaseadmin.col}>{text}</span>
    },
    ,
    {
      title: '是否有开始的租期',
      dataIndex: 'start',
      key: 'start',
      render: (text) => {
        return text == 0 ? "--" : "是";
      },
    },
    {
      title: '租期进行中',
      dataIndex: 'todo',
      key: 'todo',
      render: (text) => {
        return text == 0 ? "--" : "是";
      },
    },
    {
      title: '有结束的租期',
      dataIndex: 'done',
      key: 'done',
      render: (text) => {
        return text == 0 ? "--" : "是";
      },
    },
    {
      title: '联系人',
      dataIndex: 'link',
      key: 'link',
      render: (text) => {
        return text == null ? "--" : text;
      },
    },
    {
      title: '联系人手机号',
      dataIndex: 'phone',
      key: 'phone',
      render: (text) => {
        return text == null ? "--" : text;
      }
    },
    {
      title: '联系人邮箱',
      dataIndex: 'email',
      key: 'email',
      render: (text) => {
        return text == null ? "--" : text;
      }
    },
    {
      title: '联系人职务',
      dataIndex: 'work',
      key: 'work',
      render: (text) => {
        return text == null ? "--" : text;
      }
    },
    {
      title: '操作',
      dataIndex: 'caozuo',
      key: 'caozuo',
      render: (text, row) => <span onClick={() => {
        setIsModalOpen(true)
        // console.log(row); // 单条数据
        setListRow(row);
        // 初始化
        setListName(row.name);
        setListPhone(row.phone);
        setListEmail(row.email);
        setListWork(row.work);



      }} className={leaseadmin.col}>设置联系人{text}
      </span>
    },
  ];

  // 渲染表格数据
  let tableData = () => {
    axios.get('/api/link').then(res => {
      console.log(res);
      setCableData(res.data)
    })
  }

  //默认渲染第一页的数据
  useEffect(() => {
    tableData();
  }, [])

  // 查询
  let [selName, setSelName] = useState('');
  let [selPhone, setSelPhone] = useState('');
  // 存储查询单条数据
  let [selListRow, setSelListRow] = useState([]);

  return (
    <div>
      <div className={leaseadmin.box}>
        <h2 className={leaseadmin.title}>签约联系人</h2>
        <div className={leaseadmin.top}>
          <div className={leaseadmin.row}>
            <Input value={selName}
              onChange={(e) => {
                setSelName(e.target.value)
              }}
              placeholder='请输入客户名称' type="text" className={leaseadmin.infir} />
          </div>
          <div className={leaseadmin.row}>
            <span className={leaseadmin.label}>管理员手机号</span>
            <Input
              value={selPhone}
              type="text"
              className={leaseadmin.intwo}
              onChange={(e) => { setSelPhone(e.target.value) }} />
          </div>
          <div className={`${leaseadmin.row} ${leaseadmin.rowthird}`}>
            <span className={leaseadmin.label}>租期状态</span>
            <Radio.Group defaultValue={2} className={leaseadmin.radio} onChange={onChange} value={value}>
              <Radio value={1}>又开始的租期</Radio>
              <Radio value={2}>租期进行中</Radio>
              <Radio value={3}>有已结束的租期</Radio>
            </Radio.Group>
          </div>
          <div className={leaseadmin.row}>
            <span className={leaseadmin.label}>联系人姓名或手机号</span><Input className={leaseadmin.input} />
          </div>
          {/* 展开 */}
          {!collapsed && (
                <>
                  <div className={custom.state}>
                    <span>状态</span>
                    
                  </div>
                  <div className={custom.row}>
                    <span>面积</span>
                    <Input className={custom.input} /> <span>m<sup>2</sup></span>
                    <span className={custom.bolang}>~</span><Input className={`${custom.input} ${custom.day}`} /><span>m<sup>2</sup></span>
                  </div>
                  <div className={custom.row}>
                    <span>装修</span>
                  
                  </div>
                  <div className={custom.row}>
                  
                  </div>
                </>
              )}
              <div className={custom.line}>
                <div className={custom.collapseButton} onClick={handleCollapse}>
                  <span className={custom.zhankai}>
                    {collapsed ? <div><DownOutlined />展开筛选</div> : <div><UpOutlined />收起筛选</div>}
                  </span>
                </div>
              </div>
          <div className={leaseadmin.btn}>
                <Button onClick={() => {
                  axios.get('/api/link/select', {
                    params: {
                      name: selName,
                      phone: selPhone
                    }
                  }).then(res => {
                    console.log(res);
                    setSelListRow(res.data);
                    setCableData(res.data);
                  })
                }} className={leaseadmin.primary} type="primary">查询</Button>
                <Button onClick={() => {
                  setSelName('')
                  setSelPhone('')
                  setSelListRow('')
                  tableData();
                }} className={leaseadmin.reset}>重置</Button>
              </div>
        </div>

        <div className={leaseadmin.bottom}>
          <div className={leaseadmin.bottombox}>
          <Table
            pagination={{
              pageSize: 5, // 每页显示5条数据
              total: ctableData.length, // 总数据条数
              showTotal: (total, range) => `共${total}条记录,每页${range[1] - range[0] + 1}条`,
              itemRender, // 使用自定义的分页器渲染
              showQuickJumper: true, // 启用快速跳转
            }}
            columns={columns}
            dataSource={ctableData}
          />
          </div>
        </div>
      </div>
      <Modal footer={null}
        className={modal.modalz}
        open={isModalOpen}
        onOk={() => { setIsModalOpen(false) }}
        onCancel={() => { setIsModalOpen(false) }}>
        <div className={modal.box}></div>
        <h3 className={modal.title}>设置签约联系人</h3>
        <div className={modal.form}>
          <div className={modal.row}>
            <div className={modal.item}>
              <div>
                <span className={modal.star}>*</span>
                <span className={modal.font}>联系人姓名</span>
              </div>
              <Input onChange={(e) => {
                setListName(e.target.value)
              }} className={modal.input} value={listName} placeholder='请输入联系人姓名'></Input>
            </div>
            <div className={modal.item}>
              <div>
                <span className={modal.star}>*</span>
                <span className={modal.font}>联系人手机号</span>
              </div>
              <div className={modal.phone}>
                <Input value={'中国+86'} className={modal.address}></Input>
                <Input onChange={(e) => {
                  setListPhone(e.target.value)
                }} value={listPhone} className={`${modal.input} ${modal.newphone}`} placeholder='请输入新手机号'></Input>
              </div>
            </div>
            <div className={modal.item}>
              <div>
                <span className={modal.font}>联系人邮箱</span>
              </div>
              <Input onChange={(e) => {
                setListEmail(e.target.value)
              }} value={listEmail} className={modal.input} placeholder='请输入联系人邮箱'></Input>
            </div>
            <div className={modal.item}>
              <div>
                <span className={modal.font}>联系人职务</span>
              </div>
              <Input onChange={(e) => {
                setListWork(e.target.value)
              }} value={listWork} className={modal.input} placeholder='请输入联系人职务'></Input>
            </div>
          </div>
          <div className={modal.footer}>
            <Button onClick={() => {
              // 调用修改接口
              axios.put('/api/link/edit', {
                id: listRow.id,
                link: listName,
                phone: listPhone,
                email: listEmail,
                work: listWork
              }).then(res => {
                console.log(res);
                // listRow(res.data);
                console.log(listRow);
                tableData()

              })
              setIsModalOpen(false)
              successMsg();
            }} className={modal.ok}>确认</Button>
            <Button onClick={() => {
              console.log(123);
              setIsModalOpen(false)
            }} className={modal.cancel}>取消</Button>
          </div>
        </div>
      
      </Modal>
    </div>
  );
}